<template>
<div class="lecture-information-detail">
    <div class="arrange-panel-header">
        <div class="class-profiles">
            <div class="title">{{stuName}}({{studentId}}){{$t('culture.lecture.lectureList')}}</div>
        </div>
        <el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
    </div>

     <el-card shadow="never">
         <edu-table
                        :data="tableDataList.list"
                        :total="tableDataList.total_"
                        :pageSize="queryParams.pageSize_"
                        :order="false"
                        @page-change="onCurrentPageChange"
                        size="mini"
                        @selection-change="handleSelectionChange"
                        class="manArrange-table"
                        :selection="false"
                        stripe>
                         <el-table-column type="expand" width="30">
                              <template slot-scope="scope">
                                  <el-form class="demo-table-expand" label-width="90px" label-suffix="：">
                                    <el-form-item :label="$t('culture.lecture.contentSummary')">
                                        <el-input
                                          type="textarea"
                                          disabled="true"
                                          rows="3"
                                          v-model="scope.row.contentSummary"></el-input>
                                    </el-form-item>
                                    <el-form-item :label="$t('culture.lecture.commentsAndSuggestions')">
                                        <el-input
                                          type="textarea"
                                          disabled="true"
                                          rows="3"
                                          v-model="scope.row.commentsAndSuggestions"></el-input>
                                    </el-form-item>
                                  </el-form>
                              </template>
                         </el-table-column>
                        <el-table-column :label="$t('culture.lecture.titleOfLecture')" align="left" show-overflow-tooltip>
                             <template slot-scope="scope">{{scope.row.titleOfLecture}}</template>
                        </el-table-column>
                         <el-table-column :label="$t('culture.lecture.lectureTime')" align="left" show-overflow-tooltip>
                             <template slot-scope="scope">{{scope.row.lectureTime}}</template>
                        </el-table-column>
                        <el-table-column :label="$t('culture.lecture.speaker')" align="left" show-overflow-tooltip>
                             <template slot-scope="scope">{{scope.row.speaker}}</template>
                        </el-table-column>
                        <el-table-column :label="$t('culture.lecture.natureOfLecture')" align="left" show-overflow-tooltip>
                             <template slot-scope="scope">
                                 <label v-if="scope.row.natureOfLecture==1">{{$t('culture.lecture.commonLecture')}}</label>
                                 <label v-if="scope.row.natureOfLecture==0">{{$t('culture.lecture.noCommonLecture')}}</label>
                             </template>
                        </el-table-column>
                        <el-table-column :label="$t('culture.lecture.checkResult')" align="left" show-overflow-tooltip>
                             <template slot-scope="scope">
                                <label v-if="scope.row.checkResult==1">{{$t('culture.lecture.checked')}}</label>
                                <label v-if="scope.row.checkResult==0">{{$t('culture.lecture.noChecked')}}</label>
                                <label v-if="scope.row.checkResult==2">{{$t('culture.lecture.checking')}}</label>
                             </template>
                        </el-table-column>
                         <el-table-column :label="$t('culture.lecture.status')" align="left" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <label v-if="scope.row.status==1">{{$t('culture.lecture.submitted')}}</label>
                                <label v-if="scope.row.status==2">{{$t('culture.lecture.noSubmitted')}}</label>
                             </template>
                        </el-table-column>
                        <el-table-column :label="$t('culture.lecture.report')" align="left" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <el-button
                                  type="text"
                                  @click="download(scope.row.lectureReport)"
                                  v-if="scope.row.lectureReport != null"
                                  size="mini">{{$t('culture.lecture.download')}}</el-button>
                             </template>
                        </el-table-column>
         </edu-table>
     </el-card>
</div>
</template>
<script>
import LectureInformationApi from "common/src/api/culture/lectureInformation";
import { downloadfile } from 'common/src/api/upload';
export default {
    name: "lectureInformationDetail",
    computed:{},
    props: {
        studentId: {
            type: String,
            default: ""
        },
        stuName: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            pathKey: "detail",
            queryParams: {
                    studentId:"",
                    pageNum_:  1,
                    pageSize_: 20
            },
            tableDataList: {},
        };
    },
    created() {},
    mounted() {
       this.searchByStudentId();
    },
    activated() {},
    watch: {
        pathKey(val) {
            if (val == "main") {
                this.classId = 0;
                this.searchByStudentId();
            }
        }
    },
     methods: {
        onCurrentPageChange(currentPage) {
            this.queryParams.pageNum_ = currentPage.pageNum;
            this.queryParams.pageSize_ = currentPage.pageSize;
            this.searchByStudentId();
        },
        handleSelectionChange(val) {
            this.selectionDatas = val;
        },
        searchByStudentId() {
            this.queryParams.studentId=this.studentId;
            LectureInformationApi.lectureDetail(this.queryParams, true).then(response => {
                if (response.code === 200) {
                    this.tableDataList = response.data;
                } else {
                    throw response.msg;
                }
            });
        },
        back() {
            this.$emit("back", "main");
        },
        download(path) {
          downloadfile(path);
        }
     }
}
</script>
<style lang="scss">
.lecture-information-detail {
    background: #ffffff;
    padding: 10px 20px;
    .arrange-panel-header {
        height: 65px;
        border-bottom: 2px solid #dcdfe6;
        cursor: default;
        .head-text {
            font-size: 14px;
            color: #000;
        }
        .title {
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
        .class-profiles {
            float: left;
            width: 40%;
            div {
                padding: 5px 0;
            }
            .secondary-text {
                padding: 2px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #999;
            }
        }
        .period {
            padding: 5px 0;
            width: 80px;
            float: left;
            text-align: center;
            .number {
                font-size: 28px;
            }
        }
    }
    .section {
        position: relative;
        .el-input-number {
            width: 100%;
        }
        border-bottom: 2px solid #dcdfe6;
        .disable-mask {
            z-index: 999;
            position: absolute;
            cursor: not-allowed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            background: #cccccc;
            opacity: 0.4;
        }
        .head-line {
            cursor: pointer;
            padding: 0 10px;
            line-height: 30px;
            .section-title {
                width: 200px;
                display: inline-block;
                font-size: 16px;
            }
        }
        .head-line:hover {
            background-color: #e4e7ed;
        }
    }
    .content {
        margin-bottom: 15px;
    }
    .head-line-highlight {
      background-color: #EDF1F5 !important;
    }
    .el-card .el-card__body{
        padding:0px;
    }
}
</style>
